/*
* @login.vue
* @deprecated 賬號登錄表單組件
* @author
* @update (czh 2021/09/9)
*/
<template>
    <div class="formArea">
<!--        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item class="label" prop='name'>
                <el-input maxlength="40" autocomplete="off" :disabled="!!chipId"
                          :placeholder="chipId ? '请插入加密锁' : '请输入用户名/手机号'" v-model="form.name">
                    <template slot="prepend">
&lt;!&ndash;                      <img class="iconImg" src="../../../../assets/image/pc/user.png" alt="">&ndash;&gt;
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item class="label" prop='pwd'>
                <el-input maxlength="40" :type="visible ? 'text' : 'password'" autocomplete="off" placeholder="请输入密码"
                          v-model="form.pwd">
                    <template slot="prepend">
&lt;!&ndash;                        <img class="iconImg" src="../../../../assets/image/pc/pwd.png" alt="">&ndash;&gt;
                    </template>
                    <template slot="append">
&lt;!&ndash;                        <img class="showIcon" v-if="!visible" @click="visible = !visible"
                             src="../../../../assets/image/pc/hide.png" alt="">&ndash;&gt;
&lt;!&ndash;                        <img class="showIcon" v-else @click="visible = !visible"
                             src="../../../../assets/image/pc/show.png" alt="">&ndash;&gt;
                    </template>
                </el-input>
            </el-form-item>
            <div class="flex">
                <el-form-item class="label" prop='code' style="width: calc(100% - 130px);">
                    <el-input maxlength="4" @keyup.enter.native="login()" type="text" autocomplete="off"
                              placeholder="请输入验证码" v-model="form.code">
                        <template slot="prepend">
&lt;!&ndash;                          <img class="iconImg" src="../../../../assets/image/pc/code.png" alt="">&ndash;&gt;
                        </template>
                    </el-input>
                </el-form-item>
                <div class="por codeArea">
                    <img :src="codeUrl" class="codeBtn" @click="getCode" alt="">
                    &lt;!&ndash; <span class="codeBtnText" @click="getCode">换一换</span> &ndash;&gt;
                    <svg-icon iconClass="Addresstracking_reset1" :disabledToolTip="true" class="codeBtnText"
                              @click="getCode"></svg-icon>
                </div>
            </div>
        </el-form>
        <el-button class="primary" type="primary" v-if='!chipId || isSignatured' :loading="isLogin" @click="login">登录
        </el-button>
        <el-tooltip content="未授权，禁止登录" placement="top" effect="light" v-else>
            <el-button class="primary errBtn" type="primary">登 录</el-button>
        </el-tooltip>-->
        <p class=" flex-end checkArea">
        <!-- <span class="phone cursor" @click="$parent.areaType = 2">手机验证码登录</span>-->
            <span class="phone cursor" ></span>
            <span class="reg">
        <!-- <span class="cursor" @click="$parent.areaType = 3">注册</span>-->

<!--          <span class="cursor" @click="$parent.areaType = 4">忘记密码</span>-->
        </span>
        </p>
        <p class=" flex-center checkArea">
            登录即表明同意
            <span class="reg" style="cursor: pointer">《链必追平台服务协议》</span>
        </p>
    </div>
</template>

<script lang="ts">
// import {Base64} from 'js-base64';
// import {nameLoginUkey, login, getCodeImg, getInfo} from '@/api/login.js';
// import {deleteDataBase, getDataBase} from "../../../../utils/index-database";
import { defineComponent } from "@vue/composition-api";

export default defineComponent({
    name: "NameLogin",
    /*data() {
        var validatePwd = (rule, value, callback) => {
            if (!this.pwdReg.test(value)) {
                callback(new Error('6-12位字母+数字组合，可含特殊字符'));
            } else {
                callback();
            }
        };
        var validateUserName = (rule, value, callback) => {
            if (!this.nameReg.test(value)) {
                callback(new Error('用户名格式错误'));
            } else {
                callback();
            }
        };
        return {
            form: {
                name: this.name,
                pwd: '',
                code: '',
                uuid: '',
            },
            isLogin: false,
            rules: {
                name: [
                    {required: true, message: '请输入账户/手机号', trigger: 'blur'},
                    // { validator: validateUserName, trigger: 'blur' }
                ],
                pwd: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    // { validator: validatePwd, trigger: 'blur' }
                ],
                code: [
                    {required: true, message: '请输入验证码', trigger: 'blur'},
                ],
            },
            isFocus: false,
            codeUrl: '',
            visible: false,
        };
    },
    props: {
        isSignatured: {
            type: Boolean,
            default: false,
        },
        chipId: {
            type: String,
            default: null,
        },
        name: {
            type: String,
            default: '',
        }
    },
    created() {
        this.getCode();
        this.deleteDataBase()
    },
    methods: {
        deleteDataBase() {
            // let webDataBase = new indexDB()
            // webDataBase.deleteDataBase('xnhb').then(()=>{}).catch(err=>{console.error(err)})
            // webDataBase.deleteDataBase('xnhb-addr').then(()=>{}).catch(err=>{console.error(err)})
            // 獲取開啓的數據庫實例
            const dataBase = getDataBase('xnhb')
            if (dataBase) {
                dataBase.dbInstance.close()
                deleteDataBase('xnhb').then(() => {
                }).catch(err => {
                    console.error(err)
                })
            }
        },
        /!**
         * 获取登录验证码
         *!/
        getCode() {
            getCodeImg().then(res => {
                this.form.uuid = res.uuid;
                this.codeUrl = "data:image/gif;base64," + res.img;
            });
        },
        /!**
         * 登录方法
         *!/
        login() {
            this.form.name = this.trim(this.form.name);
            this.form.code = this.trim(this.form.code);
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.isLogin = true;
                    if (this.chipId) {
                        login({
                            login_type: 'u_key',
                            username: this.form.name,
                            password: Base64.encode(this.form.pwd),
                            code: this.form.code,
                            key_id: this.chipId,
                            uuid: this.form.uuid,
                            client_id: 'fraud_system',
                            client_secret: '123456',
                            grant_type: 'password',
                            scope: 'server',
                        }).then(res => {
                            window.localStorage.clear();
                            this.isLogin = false;
                            this.setCookie('userInfo', JSON.stringify({
                                username: res.username
                            }));
                            this.setCookie('token', res.access_token);
                            this.$root.userInfo = {
                                username: res.username
                            };
                            this.$root.token = res.access_token;
                            !this.getStore('debugSessionId') && this.setStore('debugSessionId', new Date().getTime());
                            // 获取用户信息
                            this.getUserInfo(res)
                        }).catch(error => {
                            if (error.code && error.code == 920000001) {
                                this.$parent.delTip = true;
                            }
                            this.getCode();
                            this.isLogin = false;
                        });
                    } else {
                        this.$message({
                            message: '请插入加密锁',
                            type: 'error',
                            showClose: true,
                            duration: 2 * 1000
                        })
                        this.isLogin = false;
                        // nameLoginUkey({
                        //   login_type: 'password',
                        //   username: this.form.name,
                        //   password: Base64.encode(this.form.pwd),
                        //   code: this.form.code,
                        //   uuid: this.form.uuid,
                        //   client_id: 'fraud_system',
                        //   client_secret: '123456',
                        //   grant_type: 'password',
                        //   scope: 'server',
                        // }).then(res => {
                        //   console.log(res)
                        //   window.localStorage.clear();
                        //   this.isLogin = false;
                        //   this.setCookie('userInfo', JSON.stringify({
                        //     username: res.username
                        //   }));
                        //   this.setCookie('token', res.access_token);
                        //   this.$root.userInfo = {
                        //     username: res.username
                        //   };
                        //   this.$root.token = res.access_token;
                        //   !this.getStore('debugSessionId') && this.setStore('debugSessionId', new Date().getTime());
                        //   // 金斗云的一些弹窗控制复位（0 显示 ，1不显示）
                        //   this.setStore('CaseHistoryListJdY','0')
                        //   this.setStore('investigationJdY','0')
                        //   this.$router.push({path: '/case'})
                        // }).catch(error => {
                        //   console.log(error)
                        //   this.getCode();
                        //   this.isLogin = false;
                        // });
                    }
                } else {
                    return false;
                }
            });
        },
        /!**
         * 开启跳转到平台服务协议页面方法
         *!/
        openServiceArg(){
            window.openWindow('/#/serviceArgument','serviceArgument')
        },
        /!**
         * 获取用户基本信息
         *!/
        getUserInfo(res){
            getInfo().then(userInfo => {
                // 用户是否已读更新状态
                this.$root.userNoticeReadStatus = userInfo.userNoticeReadStatus;
                // 用户类型标识，区别版本
                this.$root.versionType = userInfo.versionType
                this.$root.versionNoSuger = 'FREE'
                this.$root.versionTrialDays = res.versionTrialDays
                this.$root.versionExpiredDay = res.versionExpiredDay
                // 金斗云的一些弹窗控制复位（0 显示 ，1不显示）
                this.setStore('CaseHistoryListJdY', '0')
                this.setStore('investigationJdY', '0')
                // 标识一下是否登录页进入案件分析，
                this.setStore('isFromLogin', 'true')
                this.$router.push({path: '/case'})
            }).catch(err => {
                console.error(err)
            })
        }
    },*/
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.formArea {
    width: 100%;
    margin: auto;

    .primary {
        width: 100%;
        margin-top: 5px;
        height: 38px
    }

    .showIcon {
        height: 16px;
        position: relative;
        top: -2px;
        display: inline-block;
        cursor: pointer;
    }

    .errBtn {
        cursor: not-allowed;
    }

    .checkArea {
        margin-top: 26px;
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;

        .cursor {
            cursor: pointer;

            &:hover {
                text-decoration: underline;
            }
        }

        .phone {
            color: $mainColor1;
        }

        .reg {
            color: $lessColor3;

            span:first-child {
                margin-right: 10px;
            }
        }
    }
}

.flex {
    justify-content: space-between;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
}
.flex-end {
    display: flex;
    justify-content: flex-end;
}
.codeArea {
    width: 120px;
    text-align: left;
    top: -11px;
    margin-left: 10px;

    .codeBtn {
        width: 95px;
        height: 38px;
        cursor: pointer;
    }

    .codeBtnText {
        width: 18px;
        height: 18px;
        font-size: 12px;
        line-height: 43px;
        font-weight: 400;
        color: #C1CCEC;
        cursor: pointer;
        margin-left: 5px;
    }
}
</style>
<!--1080p的145% - 150%放大-->
<style scoped lang="scss">
@media screen and (min-width: 1280px) and (max-height: 638px) and (max-width: 1326px)  {
    .flex-center {
        justify-content: center;
    }
    .flex-end {
        justify-content: flex-end;
    }
    .formArea {
        .checkArea {
            margin-top: 20px;
        }
    }

}
</style>

